<template>
	<view>

		<view class="my-car-selct">
			<uni-data-picker placeholder="选择时间" :localdata="dataTree" v-model="time" @change="onchange">
			</uni-data-picker>
		</view>

		<view class="my-car" v-for="(car,index) in carData" :key="index" :class="'my-car-' + index">
			<view class="my-car-line">
				<image src="/static/park/car-round.png" mode="widthFix" style="width: 40rpx;"></image>
				<view class="my-car-name">
					车牌号：{{car.PlateNum}}
				</view>
				<view class="my-car-type">
					{{car.CarTypeName}}
				</view>
			</view>
			<view class="my-car-line small">
				<view class="">
					{{car.TypeName}}
				</view>
				<view class="">
					{{car.AccessTime}}
				</view>
			</view>
			<view class="my-car-line">
				<image style="width: 80%" :src="car.ImgUrl" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import parkApi from '../../api/parking';
	import getDateTree from '../../utils/dateTree';
	const dataTree = getDateTree();
	const time = ref("2025-04")
	const plateNum = ref("");
	const PageIndex = ref(1);
	const PageSize = 10;
	const carData = ref([]);
	const total = ref(0);
	onLoad(options => {
		plateNum.value = options.car
		getData(false);
	});

	onPullDownRefresh(async () => {
		console.log(1);
		PageIndex.value = 1;
		await getData(false);
		uni.stopPullDownRefresh();
	});
	onReachBottom(() => {
		console.log(111);
		if (total.value > carData.value.length) {
			PageIndex.value++;
			getData(true)
		}
	})

	const getData = async (isPush) => {
		const res = await parkApi.getCarData({
			plateNum: plateNum.value,
			time: time.value,
			PageIndex: PageIndex.value,
			PageSize: PageSize,
		});
		console.log(res);
		total.value = res.Total;
		if (res.Data) {
			if (isPush) {
				carData.value.push(...res.Data);
			} else {
				carData.value = res.Data;
			}
		}
	};
	const onchange = (e) => {
		if (e.detail.value.length) {
			PageIndex.value = 1;
			time.value = e.detail.value[1].value;
			getData();
		}
	}
</script>

<style lang="scss" scoped>
	.my-car-selct {
		position: fixed;
		top: 0;
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
	}

	.my-car {
		margin-top: 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx 40rpx;

		&.my-car-0 {
			margin-top: 100rpx;
		}

		.my-car-line {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 10rpx 0;

			&.small {
				font-size: 24rpx;
				color: #6b6b6b;
			}

			.my-car-name {
				flex: 1;
				color: #aaa;
				margin-left: 20rpx;
			}

			.my-car-type {
				color: #f00;
			}
		}
	}
</style>